<template>
	<view class="count">
		<view class="top">
			<u-row>
				<u-col span="4">
					<view class="time">
						<view>星期{{date[2]}}</view>
						<view class="date_of"><text class="long">{{date[0]}}</text>
							/{{date[1]}}</view>
					</view>
				</u-col>
				<u-col span="8">
					<view class="u-font-24 u-tips-color">
						<text>
							<u-icon name="heart" size="28"></u-icon>
							 根据你的音乐口味生成，每天6：00更新
						</text>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 歌曲列表 -->
		
		<view class="u-font-30">
			<view :class="(index%2 ==0 ? 'u-p-t-30 u-p-b-30' : 'u-p-t-30 u-p-b-30 gray')" 
				@click="show_music(item.id)" v-for="(item,index) in recommend_songs" :key="index">
				<u-row>
					<!-- 序列 -->
					<u-col span="1">
						<view class="">
							<text v-if="index<9">0</text>
							{{index+1}}
						</view>
					</u-col>
					<!-- 歌名 -->
					<u-col span="6">
						<view class="text_is_beyond">
							{{item.name}}
						</view>
					</u-col>
					<!-- 歌手 -->
					<u-col span="2">
						<view class="text_is_beyond">
							<text v-for="(line,link) in item.singer" :key="link">{{line}}<text v-if="item.singer.length != link+1">/</text></text>
						</view>
					</u-col>
					<!-- 专辑 -->
					<u-col span="2">
						<view class="text_is_beyond">
							{{item.album}}
						</view>
					</u-col>
					<!-- 时间 -->
					<u-col span="1">
						<view class="u-content-color">
							{{item.time}}
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 底部播放 -->
		<play class="play" :id='musicId'></play>
	</view>
</template>

<script>
	import play from '../../components/play_music/play.vue'
	export default {
		components: {
			play
		},
		data() {
			return {
				date: [],			//日期
				recommend_songs:[],	//推荐歌曲
				musicId:0
			}
		},
		methods: {
			show_music(iss){
				this.musicId = iss;
				// console.log(this.musicId);
			}
		},
		onLoad() {
			var mydate = new Date();
			var month = mydate.getMonth() + 1;
			var day = mydate.getDate();
			var week = mydate.getDay();
			let days = ["日", "一", "二", "三", "四", "五", "六"];
			week = days[week];
			if (day < 10) {
				day = "0" + day;
			}
			if (month < 10) {
				month = "0" + month;
			}
			this.date.push(month, day, week);
			console.log(this.date);
			//
			uni.request({
				url: "https://www.codeman.ink/api/recommend/songs",
				method: 'GET',
				success: (res) => {
					
					res.data.data.dailySongs.forEach((value,index) => {
						let songs = {};
						songs.id = value.id;
						songs.name = value.name; //歌名
						songs.singer = [];//歌手
						value.ar.forEach((item,num) => {
							songs.singer.push(item.name)
						})
						songs.album = value.al.name;//专辑
						songs.time = parseInt((value.dt)/1000);//时长
						if(songs.time < 60){
							songs.time = "00:" + songs.time;
						}else{
							let min = (parseInt(songs.time/60)<10?"0"+parseInt(songs.time/60):parseInt(songs.time/60));
							let miao = songs.time - min*60;
							if(miao == 0){
								miao = "00"
							}else{
								if(miao < 10){
									miao = "0" + miao;
								}
							}
							songs.time = min+":"+miao;
						}
						this.recommend_songs.push(songs);
					})
					// console.log(this.recommend_songs);
				}
			})
		}
	}
</script>

<style>
	.top{
		background-color: #f4f4f4;
		padding: 50rpx 0;
	}
	.time {
		width: 200rpx;
		height: 200rpx;
		text-align: center;
		margin: auto;
		padding-top: 30rpx;
		font-weight: bold;
		background-color: #ffffff;
		border: 1rpx solid #e6e6e6;
	}

	.date_of {
		color: #c62f2f;
		font-size: 35rpx;
	}

	.long {
		font-size: 55rpx;
	}
	.gray{
		background-color: #f7f2f5;
	}
	.play {
		width: 100%;
		bottom: 0upx;
		padding: 20upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
		bottom: constant(safe-area-inset-bottom);
		
	}
</style>
